<template>
    <div class="">
        <van-dropdown-menu>
            <van-dropdown-item title="综合" disabled />
            <van-dropdown-item v-model="priceVal" :options="priceOption" title="价格" @change="priceChange"/>
            <van-dropdown-item v-model="categoryVal" :options="filterCategory" title="分类" @change="categoryChange"/>
        </van-dropdown-menu>
        <van-empty v-if="goodsList.length==0" image="search" description="暂无您搜索的商品" />
        <products v-else :goodsList="goodsList" ></products>

    </div>
</template>

<script>
    import Products from '@/components/Products.vue'
    export default {
        data() {
            return {
                priceVal: "",
                categoryVal: 0,
                priceOption: [{
                        text: '价格由高到低',
                        value: "desc"
                    },
                    {
                        text: '价格由低到高',
                        value: "asc"
                    },
                ],

            }
        },
        methods:{
            categoryChange(val){
                this.$emit('categoryChange',val)
            },
            priceChange(val){
                this.$emit('priceChange',val)
            }
        },
        props: ["goodsList", "filterCategory"],
        components: {
            Products
        },
        beforeUpdate() {
            // 用户回车，更新视图之前， 遍历 filterCategory 看谁的checked为true，将其value给categoryVal设置为默认选中
            this.filterCategory.map(item => {
                if (item.checked) {
                    this.categoryVal = item.value
                    return;
                }
            })
        }
    }
</script>

<style lang="less" scoped>

</style>